<template>
  <div class="main-info">
    <div class="content-container">
      <div class="tab-content" v-loading="operateLoading">
        <div class="filter-row">
          <filter-form
            v-model="filterFormData"
            showStudentInfo
            @search="handleSearch"
            @refresh="refresh"
          />
          <!-- <div class="action-buttons">
            <el-button type="success" @click="handleExport"
              >导出Excel</el-button
            >
          </div> -->
        </div>
        <view-table
          v-loading="tableLoading"
          :table-data="tableData"
          :columns="tableColums"
          v-model:currentPage="currentPage"
          :total="total"
          :operations="[
            {
              name: 'viewScore',
              label: '查看分数',
              type: 'primary',
              link: 'true',
              size: 'small',
            },
          ]"
          operation-width="80"
          @operation="handleTableOperation"
          @load-data="loadData"
        />
      </div>
    </div>
    <!-- 查看分数对话框 -->
    <score-dialog
      v-model:dialogVisible="viewScoreDialogVisible"
      :row="scoreDialogParams"
      :type="activeTab"
      :playType="type"
    />
  </div>
</template>

<script setup>
import useAppStore from '@/store/modules/app.js'
import { ref, reactive, computed, watch, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import scoreDialog from '@/components/scoreDialog.vue'
import viewTable from '@/components/viewTable.vue'
import filterForm from '@/components/filterForm.vue'
import { infoApi } from '@/api/modules'
import { typeFieldMap } from '@/config/type'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

const appStore = useAppStore()
watch(
  () => appStore.refreshFlag,
  (newVal) => {
    if (newVal) {
      console.log(newVal)
      getTableData()
      appStore.setRefreshFlag(false)
    }
  }
)
const router = useRoute()
const activeTab = computed(() => appStore.activeTab)
const filterFormData = ref({
  groupCategory: '小学组',
  studentInfo: '',
  regNo: '',
  batchNo: '',
})
const type = computed(() => typeFieldMap[activeTab.value])
watch(
  () => activeTab.value,
  () => {
    total.value = 0
    tableData.value = []
    currentPage.value = 1
    getTableData()
  }
)

const total = ref(0)
const currentPage = ref(1)
const currentPageSize = ref(100)
const tableData = ref([])
const tableColums = ref([
  { prop: 'id', label: 'ID', width: 80 },
  { prop: 'batchNo', label: '批次号', width: 120 },
  { prop: 'groupCategory', label: '组别', width: 80 },
  { prop: 'studentInfo', label: '学生信息', width: 170 },
  { prop: 'teamName', label: '队伍名称', width: 140 },
  { prop: 'regNo', label: '报名编号', width: 120 },
  { prop: 'track', label: '赛道', width: 180 },
  { prop: 'event', label: '赛项', width: 180 },
  { prop: 'province', label: '省', width: 80 },
  { prop: 'city', label: '市', width: 80 },
  { prop: 'district', label: '区', width: 80 },
  { prop: 'organization', label: '申报单位', width: 140 },
  { prop: 'registrantInfo', label: '注册人信息', width: 120 },
  { prop: 'registrantContact', label: '注册人电话（或邮箱）', width: 170 },
  { prop: 'coachInfo', label: '教练信息', width: 90 },
  { prop: 'activationCode', label: '激活码', width: 120 },
  { prop: 'studentAge', label: '学生年龄', width: 90 },
  { prop: 'matchSequence', label: '比赛序号', width: 90 },
])

const refresh = (params) => {
  nextTick(() => {
    getTableData(params)
  })
}
const getTableData = async (params) => {
  try {
    operateLoading.value = true
    const res = await infoApi.getDataList.post({
      // batchNo: '',
      pageNum: currentPage.value,
      pageSize: currentPageSize.value,
      playType: typeFieldMap[activeTab.value],
      ...filterFormData.value,
    })
    if (res.code !== 200) {
      ElMessage.error(res.message)
      return
    }
    console.log(res)
    tableData.value = res?.data?.list || []
    total.value = res?.data?.total || 0
  } catch (error) {
    console.log(error)
  } finally {
    operateLoading.value = false
  }
}

const dialogType = ref('add')

const viewScoreDialogVisible = ref(false)
const scoreForm = reactive({
  basicScore: 0,
  sportsScore: 0,
  codingScore: 0,
})

const tableLoading = ref(false)
const operateLoading = ref(false)

const handleSearch = (params, notResetPage) => {
  getTableData(params)
}

const handleExport = () => {
  // TODO: 实现导出逻辑
  ElMessage.success('导出成功')
}

const loadData = (params) => {
  currentPage.value = params.currentPage
  currentPageSize.value = params.pageSize
  handleSearch(params, true)
}

const scoreDialogParams = ref({})
const handleTableOperation = ({ name, row }) => {
  switch (name) {
    case 'viewScore':
      scoreDialogParams.value = {
        regNo: row.regNo,
        batchNo: row.batchNo,
        groupCategory: row.groupCategory,
      }
      viewScoreDialogVisible.value = true
      break
  }
}

const formRef = ref(null)
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // TODO: 实现提交逻辑
      ElMessage.success(dialogType.value === 'add' ? '添加成功' : '编辑成功')
      dialogVisible.value = false
    } else {
      ElMessage.error('请按要求填写批次号')
      return false
    }
  })
}

// 组件挂载时触发
onMounted(() => {
  getTableData()
})
</script>

<style lang="scss" scoped>
.content-container {
  border-radius: 0;
  .table-custom {
    height: calc(100vh - 280px);
    :deep .el-scrollbar {
      max-height: calc(100vh - 362px);
      overflow-y: auto;
    }
  }
}

.filter-row {
  .action-buttons {
    display: flex;
  }
  .btn-warpper {
    display: flex;
    .el-select {
      width: 100px;
      margin-right: 15px;
    }
    .el-input {
      width: 100px;
      margin-right: 15px;
    }
  }
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.geometric-shape {
  position: absolute;
  opacity: 0.08;
  animation: float 20s infinite linear;

  &.hexagon {
    width: 100px;
    height: 115px;
    // background: #409eff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    top: 15%;
    left: 10%;
    animation-duration: 15s;
  }

  &.circle {
    width: 80px;
    height: 80px;
    background: #67c23a;
    border-radius: 50%;
    top: 60%;
    right: 15%;
    animation-duration: 18s;
  }

  &.square {
    width: 70px;
    height: 70px;
    background: #e6a23c;
    transform: rotate(45deg);
    bottom: 20%;
    left: 20%;
    animation-duration: 20s;
  }

  &.triangle {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 80px solid #f56c6c;
    top: 30%;
    right: 25%;
    animation-duration: 17s;
  }
}

@keyframes float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(50px, 50px) rotate(180deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}
.mt-4 {
  margin-top: 16px;
}
</style>
